<template>
  <div class="index">
    <van-tabs v-model="active">
      <van-tab
        v-for="channel in channels"
        :key="channel.id"
        :title="channel.name"
      >
        <!-- <div style="height:300px;overflow:auto;border:1px solid red;"> -->
        <!-- 3.组件使用 -->
        <!-- 频道与文章列表是一一对应的。每个频道都需要有一个文章列表组件。
            article-list写在了v-for中，则每次循环都会生成一个文章列表组件。
           van-tab具有类似于 懒加载的效果： 只有激活了当前的tab，才会去创建文章列表组件 -->
        <!-- :channel这个名字是自定义的，后面的channel代表值 -->
        <article-list :channel='channel'></article-list>
      </van-tab>
    </van-tabs>
    <!-- 频道列表 开关 通过定位 通过它打开频道管理的弹层 -->
    <div
      class="bar-btn"
      @click="isShowChannalEdit=true"
    >
      <van-icon name="wap-nav" />
    </div>
    <!-- 频道列表--弹层 -->
    <van-action-sheet
      v-model="isShowChannalEdit"
      title="标题"
    >
      <!-- 父传子：两步
    1、父组件自定义属性 2、子组件用prop接收 -->
      <channel-edit
        :curIndex="active"
        @fixed-active-index='hFixedActiveIndex'
        @change-channel='hChangeChannel'
        :channels="channels"
      ></channel-edit>
      <!-- <div class="content">
        后面再放入频道编辑组件
      </div> -->
    </van-action-sheet>
  </div>
</template>
<script>
// 父传子有两步：
//  1.在子组件添加自定义属性及属性值
//  2.在子组件内部通过设置props来接收传入的属性值

// 1.组件引入
import ChannelEdit from './channelEdit.vue'
import ArticleList from './articleList.vue'
import { getChannels } from '@/api/channel.js'
export default {
  name: 'home',
  data () {
    return {
      isShowChannalEdit: false, // 是否展示 频道编辑弹层
      active: '', // 当前是哪个频道处于选中状态
      channels: [] // 频道列表
    }
  },
  // 2.组件注册
  components: {
    ArticleList,
    ChannelEdit
  },
  created () {
    this.loadChannels()
  },
  methods: {
    // 当频道管理组件中，删除的频道在当前频道之前
    // 要把active-1，这样跟删除的数据位置对应上
    hFixedActiveIndex () {
      this.active--
    },
    // 父组件收到了子组件中我的频道被点击
    hChangeChannel (curIdx) {
      console.log('父组件收到了子组件中我的频道被点击', curIdx)
      // 1、切换频道
      this.active = curIdx
      // 2、关闭弹层
      this.isShowChannalEdit = false
    },
    async loadChannels () {
      try {
        const res = await getChannels()
        console.log('获取到的Channels', res)
        this.channels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style lang='less' scoped>
/* // 频道管理的开关按钮 */
.bar-btn {
  position: fixed;
  right: 5px;
  top: 57px;
  display: flex;
  align-items: center;
  background-color: #fff;
  opacity: 0.8;
  z-index: 1;
  .van-icon-wap-nav {
    font-size: 20px;
  }
}
</style>
